<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>JsonApiDotNetCore documentation</title>
  <meta content="A framework for building JSON:API compliant REST APIs using .NET Core and Entity Framework Core. Includes support for Atomic Operations." name="description">
  <meta content="jsonapidotnetcore jsonapi json:api dotnet asp.net" name="keywords">
  <link href="favicon.ico" rel="icon">
  <link href="favicon.ico" rel="apple-touch-icon">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,600,600i,700,700i" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
  <link href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/styles/default.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
  <link href="styles/home.css" rel="stylesheet">
  <link href="styles/icofont.min.css" rel="stylesheet">
  <link href="styles/dark-mode.css" rel="stylesheet" id="dark-mode-style-sheet" disabled>
  <script>
    // Running this early to prevent an initial white flash on page load when dark mode is the default theme.
    const darkModeStyleSheet = document.getElementById('dark-mode-style-sheet');
    const theme = localStorage.getItem("theme") || "auto";

    if (theme === "auto") {
      darkModeStyleSheet.disabled = !window.matchMedia("(prefers-color-scheme: dark)").matches;
    }
    else if (theme === "dark") {
      darkModeStyleSheet.disabled = false;
    } else if (theme === "light") {
      darkModeStyleSheet.disabled = true;
    }
  </script>
</head>
<body>
  <div class="container-xl">
    <div class="dropdown p-3 float-right">
      <a class="btn btn-theme dropdown-toggle" href="#" role="button" id="themeSelector" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i id="active-theme"></i>
      </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="themeSelector">
        <a class="dropdown-item theme-choice" data-theme="light" href="#"><i class="bi bi-sun"></i> Light</a>
        <a class="dropdown-item theme-choice" data-theme="dark" href="#"><i class="bi bi-moon"></i> Dark</a>
        <a class="dropdown-item theme-choice" data-theme="auto" href="#"><i class="bi-circle-half"></i> Auto</a>
      </div>
    </div>
  </div>
  <section id="hero" class="d-flex align-items-center">
    <div class="container">
      <div class="row">
        <div class="col-lg-7 pt-5 pt-lg-0 order-2 order-lg-1">
          <h1>JsonApiDotNetCore</h1>
          <h2>
            A framework for building <a href="https://jsonapi.org/" target="_blank">JSON:API</a> compliant REST APIs using .NET Core and Entity Framework Core.
            Includes support for <a href="https://jsonapi.org/ext/atomic/" target="_blank">Atomic Operations</a>.
          </h2>
          <a href="#about" class="btn-get-started scrollto">Read more</a>
          <a href="../../getting-started/install.html" class="btn-get-started">Getting started</a>
          <a href="https://github.com/json-api-dotnet/JsonApiDotNetCore/" target="_blank" class="btn-get-started">Contribute on GitHub</a>
        </div>
        <div class="col-lg-5 order-1 order-lg-2 hero-img">
          <img src="styles/img/logo.svg" class="img-fluid animated" alt="project logo">
        </div>
      </div>
    </div>
  </section>
  <main id="main">
    <section id="about" class="about">
      <div class="container">
        <div class="row justify-content-between">
          <div class="col-lg-5 d-flex align-items-center justify-content-center about-img">
            <img src="styles/img/about-img.svg" class="img-fluid" alt="people working at desk" data-aos="zoom-in">
          </div>
          <div class="col-lg-6 pt-5 pt-lg-0">
            <h3 data-aos="fade-up">Objectives</h3>
            <p data-aos="fade-up" data-aos-delay="100">
              The goal of this library is to simplify the development of APIs that leverage the full range of features
              provided by the <a href="https://jsonapi.org/" target="_blank">JSON:API</a> specification.
              You just need to focus on defining the resources and implementing your custom business logic.
            </p>
            <div class="row">
              <div class="col-md-6" data-aos="fade-up" data-aos-delay="100">
                <i class="bx bxs-package"></i>
                <h4>Eliminate boilerplate</h4>
                <p>We strive to eliminate as much boilerplate as possible by offering out-of-the-box features such as sorting, filtering and pagination.</p>
              </div>
              <div class="col-md-6" data-aos="fade-up" data-aos-delay="200">
                <i class="bx bx-category-alt"></i>
                <h4>Extensibility</h4>
                <p>This library has been designed around dependency injection, making extensibility incredibly easy.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section id="services" class="services section-bg">
      <div class="container">
        <div class="section-title" data-aos="fade-up">
          <h2>Features</h2>
          <p>The following features are supported, from HTTP all the way down to the database</p>
        </div>
        <div class="row">
          <div feature class="col-md-6 col-lg-3 d-flex align-items-stretch" data-aos="zoom-in" data-aos-delay="100" id="filter">
            <div class="icon-box">
              <div class="icon"><i class="bx bxs-filter-alt"></i></div>
              <h4 class="title">Filtering</h4>
              <p class="description">Perform compound filtering using the <code>filter</code> query string parameter</p>
            </div>
          </div>
          <div feature class="col-md-6 col-lg-3 d-flex align-items-stretch" data-aos="zoom-in" data-aos-delay="200" id="sort">
            <div class="icon-box">
              <div class="icon"><i class="bx bx-sort-a-z"></i></div>
              <h4 class="title">Sorting</h4>
              <p class="description">Order resources on one or multiple attributes using the <code>sort</code> query string parameter</p>
            </div>
          </div>
          <div feature class="col-md-6 col-lg-3 d-flex align-items-stretch" data-aos="zoom-in" data-aos-delay="300" id="pagination">
            <div class="icon-box">
              <div class="icon"><i class="bx bx-note"></i></div>
              <h4 class="title">Pagination</h4>
              <p class="description">Leverage the benefits of paginated resources with the <code>page</code> query string parameter</p>
            </div>
          </div>
          <div feature class="col-md-6 col-lg-3 d-flex align-items-stretch" data-aos="zoom-in" data-aos-delay="400" id="selection">
            <div class="icon-box">
              <div class="icon"><i class="bx bxs-select-multiple"></i></div>
              <h4 class="title">Sparse fieldset selection</h4>
              <p class="description">Get only the data that you need using the <code>fields</code> query string parameter</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div feature class="col-md-6 col-lg-3 d-flex align-items-stretch" data-aos="zoom-in" data-aos-delay="500" id="include">
            <div class="icon-box">
              <div class="icon"><i class="bx bxs-vector"></i></div>
              <h4 class="title">Relationship inclusion</h4>
              <p class="description">Side-load related resources of nested relationships using the <code>include</code> query string parameter</p>
            </div>
          </div>
          <div feature class="col-md-6 col-lg-3 d-flex align-items-stretch" data-aos="zoom-in" data-aos-delay="600" id="security">
            <div class="icon-box">
              <div class="icon"><i class="bx bxs-lock"></i></div>
              <h4 class="title">Security</h4>
              <p class="description">Configure permissions, such as viewing, creating, modifying, sorting and filtering of attributes and relationships</p>
            </div>
          </div>
          <div feature class="col-md-6 col-lg-3 d-flex align-items-stretch" data-aos="zoom-in" data-aos-delay="700" id="validation">
            <div class="icon-box">
              <div class="icon"><i class="bx bx-check-double"></i></div>
              <h4 class="title">Validation</h4>
              <p class="description">Validate incoming requests using built-in ASP.NET Model Validation, which works seamlessly with partial updates</p>
            </div>
          </div>
          <div feature class="col-md-6 col-lg-3 d-flex align-items-stretch" data-aos="zoom-in" data-aos-delay="800" id="customizable">
            <div class="icon-box">
              <div class="icon"><i class="bx bxs-category-alt"></i></div>
              <h4 class="title">Customizable</h4>
              <p class="description">Use various extensibility points to intercept and run custom code, besides just model annotations</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section id="code-example" class="services">
      <div class="container">
        <div class="section-title" data-aos="fade-up">
          <h2>Example usage</h2>
          <p>Expose <a href="../../usage/resources/index.html">resources</a> with attributes and relationships</p>
        </div>
        <div class="row">
          <div code-example class="col-md-12 col-lg-12 d-flex d-flex justify-content-center" data-aos="zoom-in" data-aos-delay="100">
            <div class="icon-box code-example">
              <div class="icon"><i class="bx bx-detail"></i></div>
              <h4 class="title">Resource</h4>
              <pre>
<code>#nullable enable

public class Article : Identifiable&lt;long&gt;
{
    [Attr]
    [MaxLength(30)]
    public string Title { get; set; } = null!;

    [Attr(Capabilities = AttrCapabilities.AllowFilter)]
    public string? Summary { get; set; }

    [Attr(PublicName = "websiteUrl")]
    public string? Url { get; set; }

    [Attr]
    [Required]
    public int? WordCount { get; set; }

    [Attr(Capabilities = AttrCapabilities.AllowView)]
    public DateTimeOffset LastModifiedAt { get; set; }

    [HasOne]
    public Person Author { get; set; } = null!;

    [HasOne]
    public Person? Reviewer { get; set; }

    [HasMany]
    public ICollection&lt;Tag&gt; Tags { get; set; } = new HashSet&lt;Tag&gt;();
}</code>
              </pre>
            </div>
          </div>
        </div>
        <div class="row">
          <div code-example class="col-md-12 col-lg-12 d-flex d-flex justify-content-center" data-aos="zoom-in" data-aos-delay="100">
            <div class="icon-box code-example">
              <div class="icon"><i class="bx bx-message-rounded-detail"></i></div>
              <h4 class="title">Request</h4>
              <pre><code>GET /articles?filter=contains(summary,'web')&sort=-lastModifiedAt&fields[articles]=title,summary&include=author HTTP/1.1</code></pre>
            </div>
          </div>
        </div>
        <div class="row">
          <div code-example class="col-md-12 col-lg-12 d-flex d-flex justify-content-center" data-aos="zoom-in" data-aos-delay="200">
            <div class="icon-box code-example">
              <div class="icon"><i class="bx bx-message-rounded-detail bx-flip-horizontal"></i></div>
              <h4 class="title">Response</h4>
              <pre>
<code>{
  "meta": {
    "totalResources": 1
  },
  "links": {
    "self": "/articles?filter=contains(summary,'web')&sort=-lastModifiedAt&fields%5Barticles%5D=title,summary&include=author",
    "first": "/articles?filter=contains(summary,'web')&sort=-lastModifiedAt&fields%5Barticles%5D=title,summary&include=author",
    "last": "/articles?filter=contains(summary,'web')&sort=-lastModifiedAt&fields%5Barticles%5D=title,summary&include=author"
  },
  "data": [
    {
      "type": "articles",
      "id": "1",
      "attributes": {
        "title": "JsonApiDotNetCore rocks!",
        "summary": "Using JsonApiDotNetCore makes the web a better accessible place."
      },
      "relationships": {
        "author": {
          "links": {
            "self": "/articles/1/relationships/author",
            "related": "/articles/1/author"
          },
          "data": {
            "type": "people",
            "id": "1"
          }
        }
      },
      "links": {
        "self": "/articles/1"
      }
    }
  ],
  "included": [
    {
      "type": "people",
      "id": "1",
      "attributes": {
        "name": "John Doe"
      },
      "relationships": {
        "articles": {
          "links": {
            "self": "/people/1/relationships/articles",
            "related": "/people/1/articles"
          }
        }
      },
      "links": {
        "self": "/people/1"
      }
    }
  ]
}
</code>
              </pre>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section id="sponsors" class="sponsors">
      <div class="container">
        <div class="section-title" data-aos="fade-up">
          <h2>Sponsors</h2>
        </div>
        <div class="row justify-content-center">
          <div sponsor class="col-md-4 col-lg-3 d-flex align-items-stretch justify-content-center aos-init aos-animate" id="jetbrains">
            <div class="icon-box d-flex align-items-center" data-aos="zoom-in" data-aos-delay="100">
              <div class="icon">
                <img src="https://resources.jetbrains.com/storage/products/company/brand/logos/jb_beam.svg" alt="JetBrains Logo" style="width:150px">
              </div>
            </div>
          </div>
          <div sponsor class="col-md-4 col-lg-3 d-flex align-items-stretch justify-content-center aos-init aos-animate" id="araxis">
            <div class="icon-box d-flex align-items-center" style="background-color: rgb(116, 125, 139)" data-aos="zoom-in" data-aos-delay="200">
              <div class="icon">
                <img src="https://www.araxis.com/theme/37/img/araxis-logo-lg.svg" alt="Araxis Logo" style="width:150px">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <footer id="footer">
      <div class="footer-newsletter section-bg aos-init aos-animate" data-aos="fade-up">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-8">
              <h4>Contact us</h4>
              <p>If you find any bugs or have a feature request, please create an issue in the <a href="https://github.com/json-api-dotnet/JsonApiDotNetCore" target="_blank">GitHub repository</a>. For questions or just to socialize, everyone is welcome in our <a href="https://gitter.im/json-api-dotnet-core/Lobby" target="_blank">Gitter channel</a>!</p>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </main>
  <a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/highlight.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
  <script src="styles/home.js"></script>
</body>
</html>
